<template>
	<view class="container">

		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- 背景色区域 -->
			<view class="titleNview-background" style="{backgroundColor:#ffffff}"></view>
			<swiper class="carousel" circular @change="swiperChange">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
					<image :src="item.image" />
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view>
		</view>
		<!-- 体验课-->
		<view class="public-title">
			<view class="s-header" @click="navToDetailPage({type: '1'})">
			 <text class="title">{{huodong1.name}}</text>
			 	<text class="yticon icon-you"></text>
			</view>
			<view class="tyk-view-image">
				<image :src="huodong1.image" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 位置/电话-->
		<view class="address-phone-info icon">
				<view  class="address">
					<text class="cell-icon yticon icon-dizhi icon-color-blue"></text>
					<text>&nbsp;&nbsp;{{address}}</text><br>
				</view>
				<view  class="phone">
		        	<text class="cell-icon yticon icon-dianhua-copy icon-color-red text_left"></text>
				</view>
		</view>
		<!-- 健身团队-->
		<view class="public-title">
			<view class="s-header" @click="navToDetailPage({type:'3'})">
			 <text class="title">健身教练</text>
				<text class="yticon icon-you"></text>
			</view>
		</view>
		<view class="guess-section">
			<view 
				v-for="(item, index) in tearmList" :key="index"
				class="guess-item"
			>
				<image :src="item.image" mode="aspectFill" ></image>
				<text class="title-name clamp">{{item.name}}
				<text class="cell-icon yticon icon-hot icon-color-red"></text>
				</text>
				<text class="title-desc clamp">{{item.level}}</text>
				<text class="title-desc clamp">评分:{{item.score}}</text>
			</view>
		</view>

		<!-- 健身环境-->
		<view class="public-title">
			<view class="s-header" @click="navToDetailPage({type: '2'})">
			 <text class="title">{{huodong2.name}}</text>
			 	<text class="yticon icon-you"></text>
			</view>
			<view class="tyk-view-image">
				<image :src="huodong2.image" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
    import service from '../../service.js';
    import { mapState } from 'vuex';
	export default {

		data() {
			return {
				carouselList: [], //首页轮播
				huodong1:{}, //活动1
				huodong2:{}, //活动2
				address:'', //地址
				phone:'', //手机号
				tearmList:[], //教练详情
				swiperCurrent: 0, //轮播当前页
				swiperLength: 0 //轮播总数
			};
		},
	    onLoad() {
		    this.loadUser();
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData() {
				var [error, res] = await uni.request({
					method:'POST',
					url: service.baseUrl+'/api/home/getInitData', 
					data: {},
					header: {'Content-Type': 'application/json'}
				});

				if(res.data.code=200){
					//轮播图
					this.carouselList=res.data.data.bannerListImg;
					this.swiperLength = res.data.data.bannerListImg.length;
					//教练
					this.tearmList=res.data.data.tearmList;
					//活动
					this.huodong1=res.data.data.huodong1;
					this.huodong2=res.data.data.huodong2;
					//地址电话			
					this.address=res.data.data.address;
					this.phone=res.data.data.phone;
					
				}else{
					 uni.showToast({
					    icon: 'error',
					    title: res.data.message,
					});
				}
			},
			/**
			 * 微信小程序授权
			 */
			async loadUser(){

			  if(!this.hasLogin){
				 uni.showLoading({title: '正在加载',duration: 60000});  
			     let param=await service.weLogin();
				 param.address=this.address;
				 console.log("用户登陆信息："+JSON.stringify(param))
				 // console.log(param)
				 this.$store.commit("login",param);
				 uni.hideLoading();
			  }
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			//点击电话按钮拨打电话
			toPhone:function(){
				uni.makePhoneCall({
					phoneNumber: this.phone
				});
			},
			//详情页
			navToDetailPage(item) {
				
				//跳转活动1页面（体验课）
				if(item.type=="1"){
					uni.navigateTo({
						url: `/pages/course/course`
					})
				}
				//跳转活动2页面（现场环境）
				if(item.type=="2"){
					uni.navigateTo({
						url: `/pages/ambient/ambient`
					})	
				}
				//跳转教练页面
				if(item.type=="3"){
					uni.navigateTo({
						url: `/pages/tearm/tearm`
					})
				}
				//地图位置
				// if(item.type=="4"){
				// 	let id = item.id;
				// 	uni.navigateTo({
				// 		url: `/pages/map/map`
				// 	})
				// }
							
			},
		}
	}
</script>

<style lang="scss">
	
	/* 默认背景色 */
	.container{
		background-color: #ffffff;
	}
	
	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}
		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			// height: 426upx;
			transition: .4s;
		}
	}
	
	/* 地址,电话*/
	.address-phone-info{
		display:flex;
		align-items:center;
		color: $font-color-base;
		padding: 15upx 30upx;
		background-color: #ffffff;
		border-top: 1px solid #d8d8d8;
		border-bottom: 1px solid #d8d8d8;
		.address{
			width:80%;
			display:inline-block;
			vertical-align: middle;
			align-items:left;
			text{
				font-size: 28upx;
				font-weight: 700;
			}
		}
		.phone{
			width:20%;
			display:inline-block;
			text-align:right;
			vertical-align: middle;
			.text_left{
				font-size: 50upx;
				border-left:3rpx solid #d8d8d8;
				padding: 20upx;
			}
		}
	}
	
	/* 通用横向标题*/
	.public-title{
		align-items:center;
		color: $font-color-base;
		background-color: #ffffff;
		border-top: 1px solid #d8d8d8;
		margin-top:10upx;
		.s-header{
			padding: 30upx 30upx;
			display:flex;
			align-items:center;
			line-height: 1;
			.icon-you{
				font-size: $font-lg;
				color: $font-color-light;
				flex: 1;
				text-align: right;
			}
			text{
				font-size: $font-sm;
				font-weight: 600;
			}
		}
		.tyk-view-image{
			image{
				width: 100%;
				height: 330upx;
			}
		}
	}
	 /* 教练团队*/
	.guess-section{
		/* 定义flex容器 */
		display:flex;
		/* 不换行 */
		flex-wrap:nowrap ;
		/* 定义flex容器 */
		display: flex;
	     /*设置容器内部容器的排列方向*/	
		flex-direction: row; 
		justify-content:space-around;
		padding-top:20upx;
		padding-bottom:20upx;
		height: 450upx;
		.guess-item{
			width: 31%;
	        height: 330upx;
			padding-bottom: 40upx;
			 image{
				width: 100%;
			 	height: 100%;
			 	opacity: 1;
			 }
		}
		.title{
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}
		.title-name{
			font-size: $font-sm;
			font-weight: 600;
			line-height: 1;
			text-align: center;
		}
		.title-desc{
			font-size: $font-sm;
			color: #a99c99;
			line-height: 1;
			padding-top:10upx;
			text-align: center;
		}
	}

	page{
		background: #f5f5f5;
		.carousel-section{
			padding: 0;
			width: 100%;
			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}
			.carousel{
				.carousel-item{
					padding: 0;
				}
			}
			.swiper-dots{
				left:45upx;
				bottom:20upx;
			}
		}
	}
	.carousel {
		width: 100%;
		height: 400upx;
		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 0upx;
			overflow: hidden;
		}
		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}
	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
	
	
	/* 用户盒子 */
	.userBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		background: linear-gradient(to top right, #63b8ff 0%, #4876ff 25%, #3a5fcd 100%);
	}
 
	/* 用户昵称 */
	.nickName {
		color: #ffffff;
	}
 
	/* 用户头像 */
	.userIcon {
		align-self: flex-end;
		border-radius: 50%;
		overflow: hidden;
		width: 100px;
		height: 100px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5)
	}
</style>
